
import { Button, DatePicker, Form, Modal } from "@/components/base";
import * as apis from "@/apis";
import { useVisible } from "@/tools/hooks";
import React from "react";
import dayjs from "dayjs";
import { SelectDepartments } from "@/components/select-departments";

/** 开始制作 */
export function StartedMaking(props: {
    record: any,
    index: number,
    refresh: () => Promise<void>,
}) {
    const { record, refresh } = props;
    const { onOpen, onClose, open } = useVisible();
    const [form] = Form.useForm();

    const handleOk = React.useCallback(async () => {
        const { dept, startTime } = form.getFieldsValue();
        const id = record.id;
        apis.order.update.post({ id, deptId: dept.dept_id, deptName: dept.name, startTime, orderStatus: apis.order.OrderStatus.开始制作 });
        refresh();
    }, [form, record.id, refresh])

    if (record.orderStatus !== apis.order.OrderStatus.已安排) return <></>;
    return (
        <>
            <Button type='link' onClick={onOpen} >开始制作</Button>
            <Modal title="开始制作" open={open} onOk={handleOk} onCancel={onClose}>
                <Form form={form} layout='vertical' >
                    <Form.Item
                        label='实际开始时间'
                        name='startTime'
                        getValueProps={(value) => { return { value: value ? dayjs(value) : undefined } }}
                        normalize={(value) => { return dayjs.isDayjs(value) ? value.format('YYYY-MM-DD') : undefined }}
                        rules={[{ required: true }]}
                    >
                        <DatePicker style={{ width: '100%' }} />
                    </Form.Item>

                    <Form.Item label='归属部门' name='dept' rules={[{ required: true }]} >
                        <SelectDepartments />
                    </Form.Item>
                </Form>
            </Modal>
        </>
    )
}
